/*
THEME NAME: North Gate Gazette
THEME URI: http://calpresstheme.org
DESCRIPTION: Example publication theme for the media-centric CalPress WordPress framework for media. 
VERSION: 0.1
AUTHOR: Josh Williams and Richard Koci Hernandez
AUTHOR URI: http://joshwilliams.com
THEME: calpress
TAGS: uc berkeley, journalism, newspapers, calpress
.
CalPress is copyright The Regents of the University of California http://www.berkeley.edu/
This work, like WordPress, is released under GNU General Public License, version 2 (GPL).
http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
.
*/

/* Basic CSS grids and resets (960/eric myers resets) */
@import url('assets/css/calpress-960-min.css');

/* Uncompressed CalPress base CSS - typography, rails, etc */
@import url('assets/css/calpress-base.css');

/* ===================== */
/* = Structural Styles = */
/* ===================== */

/* Backgrounds */

body {
	color: #000;
	font-size: 12px;
	font-family: Verdana,"Helvetica Neue", Arial, sans-serif;
	background: #ccc url('images/bg/bg-body.png') repeat-x center top;
}

#wrapper{
    background: #fff url('images/bg/bg-wrapper-2col.png') repeat-y 0 0;
    margin-top: 10px;
    border: 10px solid #f1f1f1;
}

#container{
    border-top: 10px solid #f1f1f1;
}

/* White boxes */
#header, #menu, #lead-story, #secondary-block, #sidebar li, #footer{
    background-color: #fff;
}

/* Header */

#header{
    padding: 40px 0 40px 0;
}

    #blog-title h1{
        display: block;
        width: 464px;
        height: 38px;
        background: transparent url('images/masthead.png') no-repeat 0 0;
        text-indent: -9999em;
        margin-left: 238px;
    }



#menu{
    font-weight: 600;
    font-size: 1.1em;
}

    #menu ul{
        margin: 0 0 10px 0;
    }

    #menu li{
        border-bottom: 3px solid #fff;
    }

    #menu li:hover{
        border-bottom: 3px solid #ffe286;
    }

/* 10 pixel horizontal gutters */
#secondary-block, #sidebar ul.xoxo li{
    margin-top: 10px;
}

#sidebar ul.xoxo li:first-child{
    margin-top: 0;
}

/* Sidebar */


/* Footer */
#footer{
    background: #fff url('images/footer-twitterbar.png') no-repeat center top;
    border-top: 10px solid #f1f1f1;
    text-align: left;
    margin-bottom: 0;
}

    #footer #video-playlist, #footer #footer-features, #footer #colophon{
        width: 300px;
        float: left;
        margin: 10px;
    }
    
    #footer #video-playlist{
        margin-left: 0;
    }
    
    #footer #colophon{
        margin-right: 0;
    }
    
    #footer #footer-meta{
        clear: left;
    }

    #footer a{
        text-decoration: none;
    }

    #footer h3, #footer h4{
        text-transform: uppercase;
    }

    #footer #last-tweet{
        border-bottom: 10px solid #f1f1f1;
        height: 44px;
    }
    
    #footer #last-tweet p{
        display: block;
        width: 870px;
        padding: 9px 10px 0 60px;
        font-size: 10px;
        line-height: 14px;
        margin: 0;
    }
    
    #footer #last-tweet p span{
        font-weight: 600;
        text-transform: uppercase;
        font-size: 16px;
        padding-right: 10px;
    }
    
    #footer #team-grid{
        overflow: auto;
        width: 100%;
        margin-bottom: 5px;
    }

    #footer #team-grid a{
        display: block;
        height: 56px;
        width: 56px;
        float: left;
        margin-left: 5px;
        margin-bottom: 5px;
    }
    #footer #team-grid a:first-child, #footer #team-grid a.first{
        margin-left: 0;
    }
    
    #footer #footer-meta{
        text-align: center;
    }
    
    #footer-social h6{
        margin: 0;
        color: #7C7C7C;
        font-weight: 400;
        padding-left: 50px;
        font-size: 1.1em;
    } 
    
    #footer-social p{
        display: block;
        margin: 0;
        padding: 0;
        padding-left: 50px;
        position: relative;
        height: 20px;
        top: -20px;
        padding-top: 20px;
        font-size: .9em;
    }
    
    #footer-social p a{
        display:block;
        position: relative;
        width: 90px;
        left:-50px;
        padding-left: 50px;
        top: -20px;
        padding-top: 20px;
        
    }
    
    ul#footer-social{
        border-top: 1px solid #ccc;
        padding-top: 10px;
        overflow: auto;
        width: 100%;
    }
    
    ul#footer-social li{
        float: left;
        display: block;
        width: 140px;
        height: 42px;
        padding: 5px 0;
        margin: 0 5px 10px 5px;
        border-bottom: 1px dashed #ccc;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: 4px 4px;
    }
    
    #footer-social li.rss{
       background-image: url('images/footer/social-rss.png');
    }
    
    #footer-social li.twitter{
       background-image: url('images/footer/social-twitter.png');
    }
    
    #footer-social li.facebook{
       background-image: url('images/footer/social-facebook.png');
    }
    
    #footer-social li.flickr{
       background-image: url('images/footer/social-flickr.png');
    }
    
    
    
/* ===================== */
/* = General Styles    = */
/* ===================== */    
    


/* Override Calpress defaults that mess with our formatting*/
#sidebar ul.xoxo ul{
    margin-bottom: 0;
}

/* Global art styles */
.post img{
    border: 1px solid #EEEEEE;
    padding: 4px;
}

/* Global text styles */
.entry-title a, .entry-byline a, .more a, #menu a{
    text-decoration: none;
}

.more{
    font-weight: bold;
    text-align: right;
}

/* >> in page */   
.headline-leadin:after, .more a:after, p.now-playing:after{
    content:" >> ";
    font-size: .7em;
    letter-spacing: -.2em;
    line-height: .8em;
    padding-right: 1.1em;
    padding-left: .4em; 
}

.entry-title{
    font-size: 1.3em;
    font-weight: 300;
    line-height: 1.3em;
}

.entry-meta{
    color: #bbb8b5;
    font-size: .9em;
}

.entry-byline{
    font-weight: 300;
}

span.headline-leadin{
    color: #7c7c7c;
}

p.now-playing{
    width: 115px;
    float: left;
    font-size: .9em;
    text-transform: uppercase;
    color: #7c7c7c;
    font-weight: 600;
}

h4.now-playing, #footer h4.now-playing{
    width: 185px;
    float: left;
    font-size: .9em;
    text-transform: none;
}

/* Front page */


#lead-story {

}

    #lead-story #fresh{
        display: block;
        width: 70px;
        height: 67px;
        position: relative;
        left: 556px;
        background-image: url('images/icons/fresh.png');
        text-indent: -9999em;
    }
    
    #lead-story #fresh+.post{
        margin-top: -67px;/* offset for the "fresh block" bg grapihc*/
        padding-top: 10px;
    }

    #lead-story p{
        margin-bottom: 0;
        padding-left: 300px;
        margin-top: 10px;
    }
    
    #lead-story p:first-child{
        margin-top: 0;
    }
    
    #lead-story .lead-art, #lead-story .caption{
        width: 300px;
        float: left;
        margin-right: 10px;
    }
    
    #lead-story .caption{
        clear: left;
        width: 280px;
        padding: 0 10px;
        color: #bbb8b5;
        font-size: .8em;
        line-height: 1.3em;
    }
    
    
    #lead-story .entry-title, #lead-story .entry-meta, #lead-story .entry-content{
        margin-left: 10px;
    }
    
    #lead-story #fresh + .post .entry-title{
        padding-right: 53px; /* If the the star graphic is being shown, shorten headline */
    }
    
    #lead-story .entry-title{
        margin-bottom: 9px;
    }

    #lead-story .entry-meta{
        margin-bottom: 12px;
    }


#secondary-block{
    clear: both;
}

    #secondary-block #secondary-stories>div{
        width: 300px;
        float: left;
        margin: 10px 0 10px 10px;
    }
    
    #secondary-block #secondary-stories>div:first-child{
        margin-left: 0;
        margin-right: 10px;
    }
    
    #secondary-block .entry-title{
        margin-bottom: 0;
    }

    #secondary-block h3{
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding: 5px 0;
        font-size: 1.4em;
    }
    
    #secondary-block .more{
        clear: left;
    }
    
    #secondary-block #tertiary-stories, #secondary-block #special-features{
        clear: both;
    }
    
    #secondary-block #tertiary-stories>div{
        width:280px;
        padding-left:20px;
        border-top:1px dashed #CCCCCC;
        float:left;
        margin:0 0 7px 10px;
        padding-top:7px;
        background: transparent url('images/icons/star.png') no-repeat left 12px;
    }
    
    #secondary-block #tertiary-stories>div.alt{
        margin-left: 0;
        margin-right: 10px;
        clear: left;
    }
    
    #secondary-block #tertiary-stories .entry-title{
        font-size: 1em;
        font-weight: normal;
    }
    
    #secondary-block #extra-features{
        background: transparent url('images/bg/col-1px-dashed.png') repeat-y center top;
        /* avoid clearing after */
        overflow: auto;
        width: 100%
    }
    
    #extra-features div.feature{
        width: 300px;
        float: left;
        margin-left: 10px;
        margin-right: 0px;
    }
    
    #extra-features div.feature:first-child{
        margin-left: 0;
        margin-right: 10px;
    }
    
    #extra-features h5, #extra-features h5 a{
        display: block;
        width: 300px;
        text-indent: -9999em;
    }
    
    #extra-features #front-radio h5 a{
        background: transparent url('images/extras/front-radio.png') no-repeat 0 0;
        height: 43px;
    }
    
    #extra-features #front-seeclickfix h5 a{
        background: transparent url('images/extras/front-seeclickfix.jpg') no-repeat 0 0;
        height: 80px;
    }
    